<template>
  <div id="daily-area" class="col">
      <div id="area-display-button" :class="'area-' + (Show ? 'hide' : 'show')" @click="switchDisplay">
          {{Show ? '◿' : '○'}}
      </div>
      <div v-if="Show" style="width: 100%;">
          <div class="item item-add row" @click="addEntry()">添加</div>
          <div v-for="(item, i) in TodayDaily" v-bind:key="item" :class="'item row ' + (item.done ? 'item-deleted' : '')">
              <div class="item-content">{{item.name}}</div>
              <div :class="'row item-' + (item.done ? 'unfinish' : 'finish')" @click="toggleFinishEntry(i)">{{item.done ? '-' : '○'}}</div>
              <div class="item-delete row" @click="deleteEntry(i)">×</div>
          </div>
      </div>
  </div>
</template>

<script>
/* 计时相关 */
export default {
  name: 'Daily',
  mounted() {
      this.loadData()
  },
  data() {
    return {
      Show: true,
      TodayDaily: [],
      OriginDaily: [],
    }
  },
  methods: {
      __getTodayDate(){
          return new Date().toLocaleDateString();
      },
      switchDisplay(){
          this.Show = !this.Show
      },
      saveData(){
          localStorage.dailyList = this.OriginDaily ? JSON.stringify(this.OriginDaily) : []
      },
      loadData(){
          this.OriginDaily = localStorage.dailyList ? JSON.parse(localStorage.dailyList) : []
      },
      calDisplayData(){
          this.TodayDaily = []
          var today = this.__getTodayDate()
          for(var Daily of this.OriginDaily){
              var done = (Daily.days.indexOf(today) != -1)
              this.TodayDaily.push({
                  name: Daily.name,
                  done: done
              })
          }
      },
      addEntry(){
          var name = prompt("输入每日任务名称：")
          if (!name) return
          this.OriginDaily.splice(0, 0, {
              name: name,
              days: []
          })     
      },
      deleteEntry(index){
          this.OriginDaily.splice(index, 1)
      },
      toggleFinishEntry(index){
          var Daily = this.OriginDaily[index]
          var today = this.__getTodayDate()

          index = Daily.days.indexOf(today)
          if (index == -1){
              Daily.days.push(today)
          }
          else{
              Daily.days.splice(index, 1)
          }
          this.saveData()
          this.calDisplayData()
      },
      clear(){
          if (confirm("确认清空所有数据？"))
          this.OriginDaily = []
      }
  },
  watch: {
      OriginDaily(){
          this.saveData()
          this.calDisplayData()
      }
  }
}
</script>

<style scoped>

/* 每日任务 */
#daily-area{
    width: 100%;
    min-width: 200px;
    max-width: 400px;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    padding: 8px;
    margin-bottom: 20px;
}
</style>
